<template>
  <div>
    <el-dialog class="gl_dialog_TitleLine" :close-on-click-modal="false" title="编辑分站赛" :visible.sync="dialogVisible" width="640px">
      <el-form ref="refForm" :model="vo" label-width="100px" size="small" :rules="rules">
        <el-form-item label="比赛时间" prop="date">
          <el-date-picker
            v-model="vo.date"
            style="width:100%"
            type="daterange"
            range-separator="至"
            start-placeholder="比赛开始日期"
            end-placeholder="比赛结束日期"
            value-format="yyyy-MM-dd"
            :default-value="new Date(gameInfo.startTime)"
            :picker-options="pickerOptions"
            @change="onChangeGameDate"
          />
        </el-form-item>
        <el-form-item label="分站名称" prop="name">
          <el-input v-model="vo.name" placeholder="请填写分站赛名称">
            <template slot="prepend">
              <span :title="gameInfo.name" class="prepend_ellipsis gl_ellipsis">{{ gameInfo.name }}</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="认证等级" prop="competitionCertificationLevelId">
          <el-select v-model="vo.competitionCertificationLevelId" style="width:100%" placeholder="请选择赛事认证等级">
            <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="比赛地址" prop="address">
          <el-input v-model="vo.address" placeholder="请填写比赛地址" />
        </el-form-item>
        <el-form-item label="负责人" prop="responsiblePersonName">
          <el-input v-model="vo.responsiblePersonName" placeholder="请填写负责人姓名" />
        </el-form-item>
        <el-form-item label="联系电话" prop="responsiblePersonPhone">
          <el-input v-model="vo.responsiblePersonPhone" placeholder="请填写负责人手机号码" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="close">取消</el-button>
        <el-button size="small" type="primary" :loading="submitLoading" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { CreateLeagueInput_Rules } from '@/lib/validate/league';
import {
  api_GET_EventsManagementCompetitionRequestCompetitionCertificationLevelListLeagueCompetitionId, // 获取分站赛的认证等级列表
  api_POST_EventsManagementCompetitionRequestCompetitionRequestResubmitCompetitionRequestId // 重新提交分站赛
} from '@/extend/api/gameswaggerApi/app.js';

export default {
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    const _this = this;
    return {
      dialogVisible: false,
      pageloadding: false,
      submitLoading: false,
      vo: {},
      rules: new CreateLeagueInput_Rules(),
      levelList: [], // 认证等级列表
      pickerOptions: { // 时间组件禁用日期处理
        disabledDate(time) {
          const startDate = _this.gameInfo.startTime.slice(0, 10);
          const endDate = _this.gameInfo.endTime.slice(0, 10);
          const sDateArr = startDate.split('-');
          const eDateArr = endDate.split('-');
          const sDate = new Date(sDateArr[0], sDateArr[1], sDateArr[2]).getTime();
          const eDate = new Date(eDateArr[0], eDateArr[1], eDateArr[2]).getTime();
          const y = time.getFullYear();
          const m = time.getMonth() + 1;
          const d = time.getDate();
          const _time = new Date(y, m, d).getTime();
          return _time < sDate || _time > eDate;
        }
      }
    };
  },
  watch: {
    gameInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.id) {
          this.getLevelDictList();
        }
      }
    }
  },
  methods: {
    open (res) {
      res.date = [res.startTime.slice(0, 10), res.endTime.slice(0, 10)];
      this.vo = res;
      this.dialogVisible = true;
    },
    close () {
      this.dialogVisible = false;
      this.vo = {};
      this.$refs.refForm.resetFields();
    },
    onChangeGameDate (date) {
      this.vo.startTime = date && date[0];
      this.vo.endTime = date && date[1];
    },
    // 获取认证等级字典
    getLevelDictList() {
      api_GET_EventsManagementCompetitionRequestCompetitionCertificationLevelListLeagueCompetitionId(this.gameInfo.id)
        .then(
          res => {
            this.levelList = res;
          }
        )
        .catch(
          error => {
            this.$message({
              message: `认证等级获取失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    // 提交表单
    submitForm () {
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          this.apiReSubmit(this.vo.id, this.vo);
        }
      });
    },
    apiReSubmit (id, vo) {
      api_POST_EventsManagementCompetitionRequestCompetitionRequestResubmitCompetitionRequestId(id, vo)
        .then(
          res => {
            this.$message({
              message: `分站赛编辑成功，请等待审核。`,
              type: 'success',
              showClose: true
            });
            this.close();
            this.$emit('reGetMyCompetitionRequest');
          }
        )
        .catch(
          error => {
            this.nextLoading = false;
            this.$message({
              message: `分站赛信息提交失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
